<style include="shared-css">
  .image-container {
    margin-top: 40px;
  }
  .welcome-image {
    width: 338px;
  }
  .google-full-logo {
    /* The same size as in webview. */
    width: 74px;
  }
  .secondary {
    color: var(--cr-secondary-text-color);
  }
  .skip-checkbox {
    margin: auto;
    margin-top: 40px;
  }
</style>

<div class="main-container">
  <if expr="_google_chrome">
    <img class="google-full-logo"
            src="chrome://theme/IDR_LOGO_GOOGLE_COLOR_90" alt="">
  </if>
  <h1>[[getWelcomeTitle_()]]</h1>
  <p class="secondary">$i18nRaw{accountManagerDialogWelcomeBody}</p>
  <div class="image-container">
    <if expr="_google_chrome">
      <img class="welcome-image" alt=""
          srcset="account_manager_welcome_1x.png 1x,
                  account_manager_welcome_2x.png 2x">
    </if>
  </div>
  <div class="skip-checkbox">
    <cr-checkbox id="checkbox"
        aria-label="$i18n{accountManagerDialogWelcomeCheckbox}">
      <span class="secondary">$i18n{accountManagerDialogWelcomeCheckbox}</span>
    </cr-checkbox>
  </div>
</div>
